// 导入 prop-types
// 组件属性校验，TypeScript中的一个包
import PropTypes from 'prop-types'
// 专门处理 className 的库  降维拼接类名，传入的类名，有几个拼几个，不传不拼
import classnames from 'classnames'

const Icon = ({ type, className,onClick }) => {
  return (
    // 优化类名处理   在 JSX 中的 className 属性中，使用 classnames 来拼接类名
    // 如果在使用组件时没有传递 className，此时，className 值为 undefined，这个类名就不会被添加到 class 中
				// 如果再使用组件时传递了 className，此时，className 是字符串的值，这个类就会添加到 class 中
    <svg className={classnames('icon', className)} aria-hidden="true" onClick={onClick}>
      {/* 例： type="iconfanhui" */}
      <use xlinkHref={`#${type}`}></use>
    </svg>
  )
}

// 为组件添加属性校验   propTypes属性类型
// 注意：此处为 驼峰命名法，第一个 p 小写！！！
Icon.propTypes = {
  // 约定 type 属性是 字符串类型，并且是必填的
  type: PropTypes.string.isRequired,
  className: PropTypes.string,
}

export default Icon
